<template>
  <div>
    <slot name="topOfnav"></slot>
    <el-menu
      :default-openeds="['1']"
      default-active="1-1"
      active-text-color="red"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-message-solid"> </i> Alarm
        </template>
        <router-link to="/alarm/record" tag="a">
          <el-menu-item index="1-1"> Record </el-menu-item>
        </router-link>
        <router-link to="/alarm/config" tag="a">
          <el-menu-item index="1-2"> Config </el-menu-item>
        </router-link>

        <router-link to="/alarm/report" tag="a">
          <el-menu-item index="1-3"> Report </el-menu-item>
        </router-link>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"> <i class="el-icon-setting"></i>Utils</template>
        <el-menu-item-group title="test">
          <router-link to="/apitest" tag="a">
            <el-menu-item index="1-1"> Api Test </el-menu-item>
          </router-link>
          <router-link to="/test" tag="a">
            <el-menu-item index="1-2"> Test </el-menu-item>
          </router-link>
          <router-link to="/test2" tag="a">
            <el-menu-item index="1-3"> Test2 </el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "leftNav",
};
</script>

<style>
.el-aside {
  color: #333;
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
</style>